盒模型计算方式
content - box：这是默认的盒模型。元素的宽度和高度仅包括内容区域，
不包括边框、内边距和外边距。
例如，设置width:100px;height:50px，那么内容区域就是宽 100px、
高 50px，若再设置边框、内边距等，会在内容区域之外增加相应的尺寸。
border - box：在这种盒模型下，元素的宽度和高度包括内容区域、边框和内边距。
比如设置width:100px;height:50px，如果再设置边框border:10px solid black和
内边距padding:5px，那么内容区域的实际宽度为100 - 2 * (10 + 5)=70px，
高度为50 - 2 * (10 + 5)=20px。
布局影响
content - box：由于其计算方式，在进行复杂布局时，
需要额外考虑边框、内边距对整体布局的影响，可能导致布局计算较为复杂。
border - box：使用border - box可以使布局更简单直观，
因为设置的宽度和高度就是元素占据的整体空间，不需要额外计算边框和内边距对布局的影响，
在响应式布局中经常使用。
应用场景
content - box：适合需要精确控制内容区域大小，
且边框和内边距不影响整体布局宽度和高度的场景，
如一些固定布局的页面，对内容展示有严格尺寸要求的情况。
border - box：在大多数响应式和弹性布局中更受欢迎，
因为它能让开发者更方便地控制元素的整体尺寸，确保页面在不同设备和屏幕尺寸下保持一致的布局效果。